<!-- 商品管理 -->
<template>
  <div class="curriculum-resources-container">
    <header>
      <el-form ref="searchForm" :model="searchForm" inline>
        <!-- <el-form-item label="类型" prop="roomCategory">
          <el-select v-model="searchForm.roomCategory" placeholder="请选择">
            <el-option
              v-for="item in meetArray"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </el-form-item> -->
        <el-form-item label="所属门店" prop="shopId">
          <el-select v-model="searchForm.shopId" placeholder="请选择">
            <el-option
                v-for="item in storeList"
                :key="item.id"
                :label="item.companyName"
                :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="SearchReset('searchForm')">重置</el-button>
          <el-button type="primary" @click="SearchSubmit">查询</el-button>
          <el-button type="primary" @click="CreateForm">新增</el-button>
        </el-form-item>
      </el-form>
    </header>
    <article class="flex">
      <Table
          :table-data="pageInfo.list"
          :table-column-options="pageInfo.columns"
          :table-data-total="pageInfo.list.length"
          :hasIndex="true"
          :page="1"
          :size="10"
          @tableUpdate="CurrentChange"
      >
        <template #worktime="{ data }">
          {{ data.dayStartTime }} - {{ data.dayEndTime }}
        </template>
        <template #handelation="{ data }">
          <el-switch
              v-model="data.status"
              @change="handleOnline(data)"
              active-value="1"
              inactive-value="0"
              active-text="上线"
              inactive-text="下线">
          </el-switch>
        </template>
        <template #picgroup="{ data }">
          <el-button type="text" @click="showPicModel(data)">图集</el-button>
        </template>
        <template #operation="{ data }">
          <el-button type="text" @click="TableEdit(data)">编辑</el-button>
          <el-button type="text" @click="TableDel(data)">删除</el-button>
        </template>
      </Table>
    </article>

    <el-dialog
        title="精装办公空间"
        :visible.sync="pageInfo.show"
        width="50%"
        :before-close="() => Cancel()"
    >
      <el-form ref="formDatas" :model="pageInfo.formData" label-width="140px" label-position="right">
        <el-form-item label="空间名称" prop="roomName">
          <el-input v-model="pageInfo.formData.roomName" clearable placeholder="请输入"/>
        </el-form-item>
        <el-form-item label="容纳人数" prop="capNum">
          <el-input v-model="pageInfo.formData.capNum" clearable placeholder="请输入"/>
        </el-form-item>
        <el-form-item label="面积(㎡)" prop="area">
          <el-input v-model="pageInfo.formData.area" type="number" clearable placeholder="请输入"/>
        </el-form-item>
        <el-form-item label="配置" prop="configTag">
          <el-checkbox-group v-model="pageInfo.formData.configTag">
            <el-checkbox :label="item.id" v-for="item in DictList" :key="item.id">{{ item.dictName }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="是否长期租房" prop="longRent">
          <el-switch
              v-model="pageInfo.formData.longRent"
              active-text="是"
              active-value="1"
              inactive-value="0"
              inactive-text="否">
          </el-switch>
        </el-form-item>
<!--        <el-form-item label="联系电话" prop="">-->
<!--          <el-input v-model="pageInfo.formData.phoneNum" maxlength="11" readonly placeholder="请输入"/>-->
<!--        </el-form-item>-->
        <el-form-item label="经纬度坐标">
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item prop="zbJd">
                <el-input v-model="pageInfo.formData.zbJd" clearable placeholder="经度"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="zbWd">
                <el-input v-model="pageInfo.formData.zbWd" clearable placeholder="纬度"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
        <!-- <el-form-item label="营业结束时间" >
          <el-date-picker v-model="pageInfo.formData.endDate" type="datetimerange" range-separator="To" start-placeholder="Start date" end-placeholder="End date" />
        </el-form-item> -->
        <el-form-item label="所属门店" prop="shopId">
          <el-select v-model="pageInfo.formData.shopId" @change="changeStore">
            <el-option v-for="(item, index) in storeList"  :key="index" :label="item.companyName" :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="每日营业时间">
          <el-col :span="6">
            <el-form-item prop="dayStartTime">
              <el-time-select
                  placeholder="开始时间"
                  :disabled="!pageInfo.formData.shopId"
                  v-model="pageInfo.formData.dayStartTime"
                  :picker-options="{
                                    start: storeInfo.startTime,
                                    step: '01:00',
                                    end: storeInfo.endTime
                                  }"
              >
              </el-time-select>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="1">-</el-col>
          <el-col :span="6">
            <el-form-item prop="dayEndTime">
              <el-time-select
                  placeholder="结束时间"
                  :disabled="!pageInfo.formData.shopId"
                  v-model="pageInfo.formData.dayEndTime"
                  :picker-options="{
                                    start: storeInfo.startTime,
                                    step: '01:00',
                                    end: storeInfo.endTime
                                  }"
              >
              </el-time-select>
            </el-form-item>
          </el-col>
        </el-form-item>
        
        <el-form-item label="每小时单价" prop="price">
          <el-input v-model="pageInfo.formData.price" type="number" placeholder="请输入"/>
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input v-model="pageInfo.formData.address" placeholder="请输入"/>
        </el-form-item>
        <el-form-item label="缩略图" prop="thumbUrl">
          <y-upload-img
              :url="pageInfo.formData.thumbUrl"
              @update="updateModel"
              redraw-on-server
              :cropper-options="{
                fixedNumber: [1, 1],
                centerBox: false
              }"
              :limit="1"
              re-upload
              business-sys-module-code="GOODS_MEDIA">
          </y-upload-img>

        </el-form-item>
        <!-- <el-form-item label="图集展示">
          <el-upload
            action="https://native.imflea.com:8000/zero-file-service/flea/file/upload"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus" />
          </el-upload>
        </el-form-item> -->
        <el-form-item label="简介" prop="descript">
          <el-input v-model="pageInfo.formData.descript" type="textarea" clearable placeholder="请输入"/>
        </el-form-item>
        <el-form-item label="" style="text-align: right;">
          <el-button @click="Cancel">取消</el-button>
          <el-button type="primary" @click="Submit">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
        title="图集"
        :visible.sync="picgroupInfo.show"
        width="50%"
        :before-close="() => closePicModel()"
    >

      <el-form ref="formDatas" :model="pageInfo.formData" label-width="140px" label-position="right">
        <!-- <el-form-item label="图集" prop="thumbUrl">
          <img :src="item.imgUrl" style="width:200px; max-height:200px;" v-for="item in picgroupInfo.picList" :key="item.id" alt="">
        </el-form-item> -->
        <el-form-item label="上传新图" prop="thumbUrl">
          <y-upload-img
              :url="picgroupInfo.picList"
              @update="updateModelAlbum"
              :cropper-options="{
                  fixedNumber: [4, 4],
                  centerBox: false
                }"
              :limit="6"
              :re-upload="false"
              business-sys-module-code="GOODS_MEDIA">
          </y-upload-img>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import Table from '@/components/Table/index'
import meetApi from '../../api/meet.js'

export default {
  name: 'CurriculumResources',
  components: {
    Table
  },
  data() {
    return {
      DictList: [],
      picgroupInfo: {
        show: false,
        picList: [],
        formData: {
          bizId: "",
          delFlag: "",
          iconFlag: null,
          id: "",
          imgUrl: "",
          videoAttachmentId: "",
          videoName: "",
          videoUrl: ""
        }
      },
      searchLoading: false,
      DICTDialog: false,
      searchForm: {
        roomCategory: '',
        // shopId: '',
        roomType: 0,
        pageNum: 1,
        pageSize: 10
      },
      storeList: [],
      sizeOptions: [
        {
          id: 1,
          name: '1-5人'
        },
        {
          id: 2,
          name: '6-10人'
        },
        {
          id: 3,
          name: '11-20人'
        },
        {
          id: 4,
          name: '21-40人'
        }
      ],
      optionsList: [],
      pageInfo: {
        show: false,
        formData: {
          address: "",
          capNum: null,
          configTag: [],
          dayEndTime: "",
          dayStartTime: "",
          delFlag: "",
          descript: "",
          endDate: "",
          phoneNum: "13161967869",
          price: "",
          roomCategory: "",
          roomName: "",
          roomType: 0,
          shopId: "",
          startDate: "",
          thumbUrl: "",
          zbJd: "",
          zbWd: ""
        },
        columns: [
          // {
          //   label: '编号',
          //   prop: 'no',
          //   width: 100
          // },
          {
            label: '空间名称',
            prop: 'roomName',
            width: 200
          },
          {
            label: '电话',
            prop: 'phoneNum'
          },
          {
            label: '价格',
            prop: 'price'
          },
          {
            label: '详细地址',
            prop: 'address'
          },
          {
            label: '所属门店',
            prop: 'shopName'
          },

          {
            label: '营业时间',
            columnType: true,
            slotName: 'worktime',
          },
          {
            label: '空间图集',
            columnType: true,
            slotName: 'picgroup',
          },
          {
            label: '上下线操作',
            columnType: true,
            slotName: 'handelation',
            width: 200
          },
          {
            label: '操作',
            columnType: true,
            slotName: 'operation',
            width: 200
          }
        ],
        list: [],
        data: {}
      },
      thisBizId: '',
      storeInfo: {},
    }
  },
  async mounted() {
    this.queryStoreList()
    this.queryDictList()
    this.TableList()
  },
  methods: {
    changeStore(){
      console.log(this.pageInfo.formData.shopId,22221111)
      let params = {
        id: this.pageInfo.formData.shopId
      }
      this.$yAxios({
          url: meetApi.queryStoreById,
          data: params,
          loading: true
        }, info => {
          console.log(info,2222)
          this.storeInfo = info
        })
    },
    handleOnline(row) {
      let params = {
        id: row.id
      }
      if (row.status == 1) {
        this.$yAxios({
          url: meetApi.update2Up,
          data: params,
          loading: true
        }, info => {
          this.TableList()
        })
      } else {
        this.$yAxios({
          url: meetApi.update2Down,
          data: params,
          loading: true
        }, info => {
          this.TableList()
        })
      }
    },
    showPicModel(row) {
      this.thisBizId = row.id
      this.$yAxios({
        url: meetApi.queryAlbumPage,
        data: {bizId: row.id},
        loading: true
      }, info => {
        this.picgroupInfo.show = true
        this.picgroupInfo.picList = info.list
      })

    },
    closePicModel() {
      this.picgroupInfo.show = false
    },
    // 更新图集
    SubmitAblum() {

    },
    updateModelAlbum({type, file}) {
      switch (type) {
        case 'delete': {
          // this.pageInfo.formData.thumbUrl = '';
          this.$yAxios({
            url: meetApi.removeAlbum,
            data: {
              "ids": [file.id]
            },
            loading: true
          }, info => {
          })
          this.$forceUpdate()
          break;
        }
        case 'edit':
        case 'add': {
          // this.forms.formModel.attachmentId = file.id;
          // this.pageInfo.formData.thumbUrl = file.name;
          this.$yAxios({
            url: meetApi.saveAlbum,
            data: {
              "bizId": this.thisBizId,
              "imgUrl": file.name,
            },
            loading: true
          }, info => {
            file.id = info.id
            // this.showPicModel({id: this.thisBizId})
          })
          break;
        }
      }
    },
    updateModel({type, file}) {
      switch (type) {
        case 'delete': {
          // this.forms.formModel.attachmentId = '';
          this.pageInfo.formData
          this.pageInfo.formData.thumbUrl = '';
          this.$forceUpdate()
          break;
        }
        case 'edit':
        case 'add': {
          this.pageInfo.formData.thumbUrl = file.name;
          break;
        }
      }
    },
    handleRemove(file, fileList) {
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    TableEdit(row) {

      this.thisBizId = row.id
      this.$yAxios({
        url: meetApi.queryRoomDetail,
        data: {id: row.id},
        loading: true
      }, info => {
        this.pageInfo.show = true
        info.configTag = info.configTag.split(',')
        this.pageInfo.formData = info
        this.changeStore()
      })

    },
    // 删除
    TableDel(data) {
      this.$confirm('你确定要删除此条数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$yAxios({
          url: meetApi.removeRoom,
          data: {ids: [data.id]},
          loading: true
        }, info => {
          this.TableList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // // 详情
    // viewDetail() {
    //   this.pageInfo.show = true
    // },
    TableList() {
      this.$yAxios({
        url: meetApi.queryRoom,
        data: this.searchForm,
      }, info => {
        this.pageInfo.list = info.list
      })
    },
    Submit() {
      let params = JSON.parse(JSON.stringify(this.pageInfo.formData))
      this.pageInfo.formData.configTag = params.configTag.join(',')

      this.$yAxios({
        url: meetApi.saveRoom,
        data: this.pageInfo.formData,
        loading: true
      }, info => {
        this.TableList()
        this.$refs.formDatas.resetFields()
        this.pageInfo.show = false
      })
    },
    // 点击查询按钮
    SearchSubmit() {
      this.searchLoading = true
      this.searchForm.pageNum = 1
      this.TableList()
    },
    // 点击重置按钮
    SearchReset(name) {
      this.$refs[name].resetFields()
      this.searchForm.pageNum = 1
      this.TableList()
    },
    // 点击新增按钮
    CreateForm() {

      this.pageInfo.formData = {
        address: "",
        capNum: null,
        configTag: [],
        dayEndTime: "",
        dayStartTime: "",
        delFlag: "",
        descript: "",
        endDate: "",
        phoneNum: "13161967869",
        price: "",
        roomCategory: "",
        roomName: "",
        roomType: 0,
        shopId: "",
        startDate: "",
        thumbUrl: "",
        zbJd: "",
        zbWd: ""
      }
      this.pageInfo.show = true
      // this.$refs.formDatas = {}
    },
    // 分页数据回调
    CurrentChange(e) {
      // this.searchForm.pageSize = e.size
      this.searchForm.page = e
      this.TableList()
    },
    // 点击表单取消
    Cancel(name) {
      // this.$refs[name].resetFields()
      this.$refs.formDatas.resetFields()

      this.pageInfo.show = false
    },
    queryDictList() {
      this.$yAxios({
        url: meetApi.queryByPcode,
        data: {
          "pcode": 'HYS_BQ'
        },
        loading: true
      }, info => {
        this.DictList = info
      })
    },
    queryStoreList() {
      this.$yAxios({
        url: meetApi.storeAllList,
        data: {},
        loading: true
      }, info => {
        this.storeList = info
      })
    },
  }
}
</script>

<style lang="less" scoped>
.curriculum-resources-container {
  padding: 20px;

  ::v-deep.curriculum-wrap .el-form-item__content {
    display: flex;
    justify-content: flex-start;

    // justify-content: space-between;
    // & > div{
    //   flex: 1;
    // }
    .cover {
      width: 150px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .video {
      width: 150px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
